<template>
    <div id="file-player">
        <p>
            <input type="file" @change="fileChange" />
            <button type="button" @click="fileNextRead">读取</button>
        </p>
        <p class="read-data">
            <file-data-node :item="scn_root"></file-data-node>
        </p>
    </div>
</template>


<style lang="scss">
#file-player {
    .read-data {
        max-width: 800px;
        text-align: left;
        margin: auto;
        background: #fff;
        //box-shadow: 1px 1px 5px #0002;
    }
}
</style>


<script lang="ts">
import _ from 'lodash';
import { Component, Vue } from 'vue-property-decorator';
import { RootNode } from '@/plugins/file-data/scn/scn-models'
import FileDataNode from '@/components/FileDataNode.vue'

@Component({
    components: { FileDataNode }
})
export default class FilePlayer extends Vue {
    file_src?: File
    // filename = ""
    // start = 0

    scn_root = new RootNode;

    created() {
        this.scn_root.name = "root";
    }

    async fileChange(event: Event) {
        let file_element = event.srcElement as HTMLInputElement;
        if (file_element.files) {
            let file = file_element.files[0];
            this.file_src = file;
            //this.start = 0;
        }
    }

    async fileNextRead() {
        if (this.file_src) {
            this.scn_root.data_source = this.file_src;
            await this.scn_root.analyze();
            console.log(this.scn_root);
        }
    }
}
</script>